<template>
    <div class="kanban">
        <el-form :model="form" class="app-search" ref="searchForm">
            <el-select class="app-search-item" clearable filterable placeholder="地区" size="medium"
                       style="width:100px;" v-model="form.province"
            >
                <el-option :label="item" :value="item" v-for="item in provinces"/>
            </el-select>
            <el-input class="app-search-item" clearable placeholder="请输入商户名称查询" size="medium"
                      style="width:220px;"
                      v-model="form.name"
            />
            <el-select class="app-search-item" clearable filterable placeholder="状态" size="medium"
                       style="width:130px;" v-model="form.status"
            >
                <el-option label="审核中" value="APPROVING"/>
                <el-option label="已审核" value="APPROVED"/>
                <el-option label="审核不通过" value="REJECTED"/>
            </el-select>
            <el-select class="app-search-item" clearable filterable placeholder="是否已禁用" size="medium"
                       style="width:120px;" v-model="form.disabled"
            >
                <el-option label="是" value="1"/>
                <el-option label="否" value="0"/>
            </el-select>
            <el-button @click="fetchData(1)" class="app-search-item" icon="el-icon-search" size="medium"
                       type="primary"
            >
                搜索
            </el-button>
            <!--<el-button @click="openAddDialog()" class="app-search-item" icon="el-icon-search" size="medium"
                       type="success"
            >
                新增
            </el-button>-->
        </el-form>
        <el-table :data="items" style="width: 100%">
            <el-table-column label="商户名称" prop="name">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.name}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="地区" prop="province">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.province}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="余额" prop="balance">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.balance  | yuan }} 元</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="押金" prop="deposit">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.deposit  | yuan}} 元</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="平台抽成(千分之)" prop="commission">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.commission}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="状态" prop="status">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.status | merchantStatusText}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="停用/启用" prop="disabled">
                <template slot-scope="scope">
                    <div class="template-name">
                        <b>{{scope.row.disabled === 1 ? '已停用' : '正常'}}</b>
                    </div>
                </template>
            </el-table-column>
            <el-table-column align="center" class-name="status-col" label="操作" width="250">
                <template slot-scope="scope">
                    <el-button @click="detail(scope.row)" size="mini" type="primary">详情</el-button>
                    <el-button @click="openEditDialog(scope.row)" size="mini" type="warning"
                               v-if="scope.row.status==='APPROVED'">编辑
                    </el-button>
                    <el-button @click="approve(scope.row.id, true)" size="mini"
                               type="success" v-if="scope.row.status==='APPROVING'">
                        通过
                    </el-button>
                    <el-button @click="openApproveDialog(scope.row)" size="mini" type="danger"
                               v-if="scope.row.status==='APPROVING'">
                        拒绝
                    </el-button>
                    <el-button @click="disable(scope.row.id, true)" size="mini" type="info"
                               v-if="scope.row.disabled===0 && scope.row.status==='APPROVED'">停用
                    </el-button>
                    <el-button @click="disable(scope.row.id, false)" size="mini" type="success"
                               v-if="scope.row.disabled===1  && scope.row.status==='APPROVED'">启用
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="block">
            <el-pagination :page-size="form.size" :total="form.total" @current-change="fetchData"
                           layout="prev, pager, next"
                           width="1000">
            </el-pagination>
        </div>

        <el-dialog :visible.sync="detailDialogShow" width="800px">
            <el-descriptions :column="2" :title="detailDialogTitle" border>
                <el-descriptions-item label="商户名称">{{ detailDialogData.name }}
                </el-descriptions-item>
                <el-descriptions-item label="简称">{{ detailDialogData.alias }}
                </el-descriptions-item>

                <el-descriptions-item label="联系电话">{{ detailDialogData.mobile }}
                </el-descriptions-item>
                <el-descriptions-item label="营业执照">
                    <el-image :preview-src-list="[detailDialogData.certOss]" :src="detailDialogData.certOss"
                              class="el-image-viewer__img"></el-image>
                </el-descriptions-item>

                <el-descriptions-item label="余额">{{ detailDialogData.balance | yuan }}
                </el-descriptions-item>
                <el-descriptions-item label="押金">{{ detailDialogData.deposit | yuan }}
                </el-descriptions-item>
                <el-descriptions-item label="省">{{ detailDialogData.province }}
                </el-descriptions-item>
                <el-descriptions-item label="市">{{ detailDialogData.city }}
                </el-descriptions-item>
                <el-descriptions-item label="区">{{ detailDialogData.districts }}
                </el-descriptions-item>
                <el-descriptions-item label="详细地址">{{ detailDialogData.detailAddress }}
                </el-descriptions-item>
                <el-descriptions-item label="平台抽成">{{ detailDialogData.commission }}‰
                </el-descriptions-item>
                <el-descriptions-item label="收货地址">{{ detailDialogData.logisticsAddress }}
                </el-descriptions-item>
            </el-descriptions>
        </el-dialog>

        <!-- dialog弹窗 -->
        <el-dialog :show-close="false" :title="editDialogData.title" :visible.sync="editDialogData.visible"
                   width="800px">
            <el-form :model="editDialogData" :rules="editRules" label-width="140px" ref="editMerchant"
                     style="padding-right: 30px;">
                <el-form-item label="别名：" prop="alias">
                    <el-input v-model="editDialogData.alias"/>
                </el-form-item>
                <el-form-item label="是否开通售卖业务" prop="marketable">
                    <el-radio-group v-model="editDialogData.marketable">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否开通租赁业务" prop="marketable">
                    <el-radio-group v-model="editDialogData.rentable">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="抽成(千分之)：" prop="commission">
                    <el-input type="number" v-model="editDialogData.commission"/>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeEditDialog()" type="default">取消</el-button>
                <el-button @click="save('editMerchant')" type="primary"> 确定</el-button>
            </div>
        </el-dialog>

        <el-dialog :visible.sync="approveForm.visible" width="800">
            <el-form :model="approveForm" :rules="approveFormRules" label-width="140px" ref="editMerchant"
                     style="padding-right: 30px;">
                <el-form-item label="是否通过：" prop="alias">
                    <el-radio>
                    </el-radio>
                </el-form-item>
                <el-form-item label="抽成(千分之)：" prop="commission">
                    <el-input type="number" v-model="editDialogData.commission"/>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!-- dialog弹窗 -->
        <el-dialog :visible.sync="approveForm.visible" title="审批" width="800px">
            <el-form :model="approveFormRules" label-width="120px" ref="approveForm">
                <el-form-item label="审批描述：">
                    <el-input :rows="3" placeholder="拒绝原因" type="textarea" v-model="approveForm.rejectReason"/>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="approve(approveForm.id, false, approveForm.rejectReason)" type="primary">确定
                </el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: 'Merchant',
        info: {},
        data() {
            return {
                form: {
                    page: 1,
                    size: 10,
                    total: 0,
                    province: '',
                    name: '',
                    status: '',
                    disabled: ''
                },
                provinces: [],
                items: [],
                detailDialogTitle: '',
                detailDialogShow: false,
                detailDialogData: {},
                editDialogData: {
                    id: '',
                    mobile: '',
                    name: '',
                    alias: '',
                    taxNo: '',
                    certOss: '',
                    province: '',
                    city: '',
                    districts: '',
                    detailAddress: '',
                    commission: 6,
                    marketable: 1,
                    rentable: 1,
                    exchangable: 1,
                    logisticsAddress: '',
                    logisticsContact: '',
                    visible: false,
                    title: '编辑商户',
                },
                editRules: {
                    alias: [{required: true, message: '此项不能为空', trigger: 'blur'}],
                    commission: [
                        {required: true, message: '此项不能为空', trigger: 'blur'},
                        {
                            pattern: /^(?!0)\d{1,3}$/,
                            message: '必须是 1-999 之间的数',
                            trigger: 'blur'
                        }
                    ]
                },
                approveForm: {
                    id: '',
                    approve: true,
                    rejectReason: '',
                    visible: false
                },
                approveFormRules: {
                    approve: [{required: true, message: '此项不能为空', trigger: 'blur'}],
                    rejectReason: [{required: true, message: '此项不能为空', trigger: 'blur'}]
                }
            }
        },
        methods: {
            fetchProvinces() {
                this.$fetch('/merchant/provinces').then(res => {
                    if (res.code === 0) {
                        this.provinces = res.data
                    } else {
                        this.$message.error(res.errorMsg)
                    }
                })
            },
            fetchData(page) {
                if (page) {
                    this.form.page = page
                }
                this.$fetch('/admin/merchant/list?province=' + this.form.province + '&name=' + this.form.name + '&status=' + this.form.status + '&disabled=' + this.form.disabled + '&page=' + this.form.page)
                    .then(res => {
                        if (res.code === 0) {
                            this.items = res.data.records
                        } else {
                            this.$message.error(res.errorMsg)
                        }
                    })
            },
            detail(data) {
                this.detailDialogData = data;
                this.detailDialogTitle = '商户详情';
                this.detailDialogShow = true
            },
            openEditDialog(data) {
                this.editDialogData = {...data};
                this.editDialogData.visible = true
            },
            closeEditDialog() {
                this.editDialogData = {
                    visible: false,
                    title: '编辑商户'
                }
            },
            save(formName) {
                this.$refs[formName].validate((valid) => {
                    if (!valid) {
                        this.$message({type: 'error', message: '请输入正确的数据!'});
                        return false
                    }
                    this.$post('/admin/merchant/save', {
                        id: this.editDialogData.id,
                        alias: this.editDialogData.alias,
                        commission: this.editDialogData.commission,
                        marketable: this.editDialogData.marketable,
                        rentable: this.editDialogData.rentable
                    }).then(res => {
                        if (res.code === 1) {
                            this.$message({type: 'error', message: res.errorMsg});
                        } else {
                            this.$message({type: 'success', message: '编辑成功'});
                            this.closeEditDialog();
                            this.fetchData()
                        }
                    })
                })
            },
            openApproveDialog(row) {
                this.approveForm.id = row.id;
                this.approveForm.visible = true
            },
            approve(id, approve, rejectReason) {
                const data = {
                    id: id,
                    approve: approve,
                    rejectReason: rejectReason
                };
                this.$put('/admin/merchant/approve', data)
                    .then(res => {
                        if (res.code === 1) {
                            this.$message({type: 'error', message: res.errorMsg});
                        } else {
                            this.$message({type: 'success', message: '操作成功'});
                            this.closeApproveDialog();
                            this.fetchData()
                        }
                    })
            },
            closeApproveDialog() {
                this.approveForm.visible = false
            },
            disable(id, disabled) {
                this.$put('/admin/merchant/disable', {id: id, disable: disabled}).then(res => {
                    if (res.code === 1) {
                        this.$message({type: 'error', message: res.errorMsg});
                    } else {
                        this.$message({type: 'success', message: '操作成功'});
                        this.closeApproveDialog();
                        this.fetchData()
                    }
                })
            }
        },
        mounted() {
            this.fetchProvinces();
            this.fetchData()
        }
    }
</script>
<style>
    .block {
        display: -webkit-flex;
        display: flex;
        justify-content: flex-end;
        padding: 15px 30px;
    }

    .kanban {
        padding: 25px 25px;
    }

    .el-image-viewer__img {
        width: 120px;
        height: 120px;
    }

</style>
